<template>
  <el-dialog
    v-model="visible"
    title="批量修改图片信息"
    width="500px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="分类" prop="category">
        <DictSelect
          v-model="form.category"
          dict-type="image_category"
          placeholder="请选择分类"
          clearable
        />
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <DictSelect
          v-model="form.tags"
          dict-type="image_tag"
          placeholder="请选择标签"
          multiple
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'
import DictSelect from '@/components/DictSelect.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)
const loading = ref(false)
const formRef = ref()

const form = reactive({
  category: '',
  tags: []
})

const rules = {
  // 可以根据需要添加验证规则
}

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  }
)

const handleClose = () => {
  emit('update:modelValue', false)
  // 重置表单
  form.category = ''
  form.tags = []
}

const handleSubmit = async () => {
  if (!form.category && (!form.tags || form.tags.length === 0)) {
    ElMessage.warning('请至少选择一个分类或标签')
    return
  }

  try {
    loading.value = true
    // 返回表单数据
    emit('success', { category: form.category, tags: form.tags })
    handleClose()
  } catch (error) {
    ElMessage.error('操作失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>